<script setup lang="ts">
import { PaintBoard } from '@/utils/paintBoard'
import LayerItem from './layerItem.vue'
import { DndProvider } from 'vue3-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
interface IProps {
  board: PaintBoard | undefined // 画板
  refresh: () => void // 刷新事件
}

const { board, refresh } = defineProps<IProps>()

const addLayer = () => {
  if (board) {
    board.layer.add()
    refresh()
  }
}

/**
 * 删除图层
 * @param id 图层id
 */
const deleteLayer = (id: number | undefined) => {
  if (board && board.layer.stack.length > 1 && id) {
    board.history.delete('layer', id)
    board.layer.delete(id)
    refresh()
  }
}
</script>

<template>
  <div class="mt-3">
    <div class="font-bold flex justify-between items-center">
      <span>Layer</span>
      <div>
        <span @click="addLayer" class="text-2xl cursor-pointer tooltip" data-tip="add"> + </span>
        <span
          @click="
            () => {
              deleteLayer(board?.layer.current)
            }
          "
          class="ml-3 mr-3 text-2xl cursor-pointer tooltip"
          data-tip="delete"
        >
          -
        </span>
      </div>
    </div>
		<div class="mt-1 bg-white rounded-lg overflow-y-auto max-h-32">
			<DndProvider :backend="HTML5Backend">
				<LayerItem
						v-for="(item,i) in board?.layer.stack"
						:index="i"
						:key="item.id"
						:board="board"
						:data="item"
						:refresh="refresh"
					/>
        </DndProvider>
		</div>
  </div>
</template>

<style scoped></style>
